<template>
	<div class="datelist">
			<!-- 搜索框 -->
			<el-row justify="center">
				<el-col :span="23">
					<el-button type="danger">请输入查询内容</el-button>
					<el-input v-model="types" placeholder="请输入内容" />
					<el-button type="danger" @click="search()" >
						<el-icon class="el-icon--right"><Search /></el-icon>
					</el-button>
				</el-col>
			</el-row>
			<div class="top-box_buttom"></div>
			<el-container>
			<el-aside width="200px">
				<el-menu 
					  background-color="#ffffff"
					  text-color="#000000" 
					  active-text-color="#000000"
					  select="close"
					  unique-opened
					  >
					<el-sub-menu @click="getBook(0)" index="1">
						<template #title><span>全部商品类型</span></template>
					</el-sub-menu>
					<!-- 循环一级菜单 -->
					<template v-for="(item,index) in chilrType">
						<template v-if="item.child">
							<el-sub-menu   :index="index+'-1'" :key='index'>
								 <template #title><span>{{item.type}}</span></template>
								<el-menu-item  v-for="(child,num) in item.child"
									:index="index+'-'+num"
									:key='num'
									@click="getBook(child.id)"
									>{{child.type}}
								</el-menu-item>
							</el-sub-menu>
						</template>
						<template v-else>
							<el-sub-menu :index="index+'-1'" :key='index' @click="getBook(item.id)">
								 <template #title><span>{{item.type}}</span></template>
							</el-sub-menu>
						</template>
					</template>
				</el-menu>
			</el-aside>
			
			<el-main>
				 <el-row>
				    <el-col
						  v-for="(item, index) in typeBooks"
						  :key="item.id"
						  :span="9"
						  :offset="index%2!=0?3:0"
						>
						  <el-card :body-style="{ padding: '0px',display:'flex'}">
								<img
								  :src="`${$Imgurl}/api/public/showImg/${item.picture}`"
								  class="image"
								  style="width: 100px;"
								/>
								<div class="el-card-right">
								 <p v-html="item.name"></p>
								 <p v-html="item.author"></p>
								 <p v-html="item.publisher"></p>
								  <div class="bottom">
									<el-button type="danger" @click="purchase(item.id)">购买</el-button>
								  </div>
								</div>
						  </el-card>
				    </el-col>
				  </el-row>
				  <el-pagination background 
				  layout="prev, pager, next" 
				  :total="total"
				  :page-size="pagenum"
				  :hide-on-single-page="true"
				  v-model:currentPage="page"
				  ></el-pagination>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import {ArrowRight,Search} from '@element-plus/icons-vue';
	import {mapState} from 'vuex';
	import { ElMessage } from 'element-plus'
	export default {
		name:'DetaList',
		data(){
			return{
				list:[],//原数组
				typeBooks:[],
				page:1,//当前页码数
				pagenum:6,//每页显示数据
				total:0,//总条数
				id:0,
				types:'',//搜索
				chilrType:[],//用于接受新数组
				flag:false,
			}
		},
		components:{
			ArrowRight,
			Search
		},
		watch:{
			page(){
				if(this.flag){
					this.getDataBook()
				}else{
					this.search()
				}
			}
		},
		methods:{
			//商品分类
			getBook(id){
				this.flag = true;
				this.id=id
				this.getDataBook()
			},
			// 根据类型获取书籍
			getDataBook(){
				this.axios.get(`/api/public/findBookByPage/${this.page-1}/6/${this.id}`).then((res)=>{
					this.total=res.data.data.total
					this.typeBooks = res.data.data.books
				}).catch((error)=>{
					//console.log(error);
				})
			},
			//加入购物车
			purchase(id){
				if(!localStorage.getItem('role')){
					ElMessage({message:"请登录后操作！",type: "error"})
				}
				if(localStorage.getItem('role')=="P"){
					this.axios.get(`api/public/addCart/${id}`).then((res)=>{
						ElMessage({message:"加入购物车成功！",type: "success"})
					})
				}
			},
			//查询
			search(){
				this.axios.post(`/api/public/book/findIf/${this.page-1}/6`,'key='+this.types).then((res)=>{
					this.flag = false;
					this.typeBooks = res.data.data.books
					this.total=res.data.data.total
				}).catch((error)=>{
					// console.log(error);
				})
			},
			// 多级菜单格式化
			getMeun(id,arr){
				if(id===0){
					this.list.forEach(item=>{
						if(item.pid===0){
							arr.push(item);
						}
					})
					// 在第一级菜单完成之后，从第一级的第一个菜单开始，进入第二级菜单的筛选
					this.getMeun(this.chilrType[0].id,this.chilrType)
					console.log(this.chilrType);
				}else{
					//循环等级数组，给每一个第一级找到第二级
					arr.forEach((item,i)=>{
						//2.将meun整个循环，将每一个数据都给等级作比较
						this.list.forEach((val,k)=>{
							//判断父级的id是否等于数据的pid，【符合：数据是父级的子级菜单】
							if(item.id===val.pid){
								if(!item.child)item.child=[];
								//将符合条件的数据添加到child中
								item.child.push(val)
							}
						})
						if(item.child){
							this.getMeun(item.child[0].id,item.child)
						}
						// console.log(item.child[i].id,item);
						if(i>this.chilrType.length){
							throw Error()
						}
					});
				}
			}
		},
		created() {
			this.axios.get('/api/public/type/findAll2').then((res)=>{
				this.list = res.data.data
				this.getMeun(0,this.chilrType)
			}).catch((error)=>{
				console.log(error);
			});
			if(this.type){
				this.types = this.type
				this.search()
			}
		},
		computed:{
			...mapState(['type'])
		}
	}
</script>

<style scoped>
	:deep(.is-always-shadow){
		margin-top: 10px;
	}
	.el-row{
		margin: 10px 0;
	}
	.el-row .el-button{
		height: 100%;
	}
	.el-menu-item{
		display: flex;
		justify-content: space-between;
	}
	.el-aside {
	  background-color: #ffffff;
	  color: var(--el-text-color-primary);
	  text-align: center;
	}
	.el-aside ul li{
		text-align: center !important;
	}
	.el-input{
		width: 80% !important;
	}
	.top-box_buttom{
		margin: 10px 0;
		border-bottom: 3px solid #f56c6c;
	}
	.el-carousel__item h3 {
	  color: #475669;
	  font-size: 14px;
	  opacity: 0.75;
	  line-height: 200px;
	  margin: 0;
	  text-align: center;
	}
	.el-button{
		padding: 7px 15px;
		min-height: 0px;
		cursor: pointer;
	}
	.el-container{
		width: 100%;
	}
	.el-main{
		padding: 0 0 0 20px;
	}
	>>> .el-card__body{
		max-height: 180px;
		display: flex !important;
	}
	.el-card-right{
		float: right;
		width: 100%;
		padding: 14px;
	}
	.el-card-right:hover{
		background: rgba(0,0,0,0.2);
	}
	.el-card-right p{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0;
	}
</style>
